import React, {Component} from 'react';
import axios from 'axios';

export default class Edit extends Component {
  constructor(props) {
    super(props);
    this.onChangeWorkStartAt = this.onChangeWorkStartAt.bind(this);
    this.onChangeWorkEndAt = this.onChangeWorkEndAt.bind(this);
    this.onChangeRestStartAt = this.onChangeRestStartAt.bind(this);
    this.onChangeRestEndAt = this.onChangeRestEndAt.bind(this);
    this.onChangeContent = this.onChangeContent.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      work_start_at: '',
      work_end_at: '',
      rest_start_at: '',
      rest_end_at: '',
      content: ''
    }
  }

  componentDidMount() {
    axios.get('http://127.0.0.1:8000/overwork-signups/' + this.props.match.params.id + '?raw_datetime=true', {
      'headers': {
        'Authorization': 'Bearer ' + window.localStorage.getItem('access_token')
      }
    }).then(response => {
      console.log(1111, response.data.work_start_at);
      this.setState({
        work_start_at: response.data.work_start_at,
        work_end_at: response.data.work_end_at,
        rest_start_at: response.data.rest_start_at,
        rest_end_at: response.data.rest_end_at,
        content: response.data.content
      });
    }).catch(function (error) {
      console.log(error);
    })
  }

  onChangeWorkStartAt(e) {
    this.setState({work_start_at: e.target.value});
  }
  onChangeWorkEndAt(e) {
    this.setState({work_end_at: e.target.value})
  }
  onChangeRestStartAt(e) {
    this.setState({rest_start_at: e.target.value})
  }

  onChangeRestEndAt(e) {
    this.setState({rest_end_at: e.target.value})
  }


  onChangeContent(e) {
    this.setState({content: e.target.value})
  }
  onSubmit(e) {
    e.preventDefault();
    const obj = {
      work_start_at: this.state.work_start_at,
      work_end_at: this.state.work_end_at,
      rest_start_at: this.state.rest_start_at,
      rest_end_at: this.state.rest_end_at,
      content: this.state.content
    };
    axios.put('http://127.0.0.1:8000/overwork-signups/' + this.props.match.params.id + '/', obj, {
      'headers': {
        'Authorization': 'Bearer ' + window.localStorage.getItem('access_token')
      }
    }).then(res => console.log(res.data));

    // this.props.history.push('/index');
    window.location.href = 'http://127.0.0.1:3000/index'
  }

  render() {
    return (
      <div style={
        {marginTop: 10}
      }>
        <h3 align="center">更新加班记录</h3>
        <form onSubmit={
          this.onSubmit
        }>
          <div className="form-group">
            <label>加班开始时间:
            </label>
            <input required type="datetime-local" className="form-control"
              value={
                this.state.work_start_at
              }
              onChange={
                this.onChangeWorkStartAt
              }/>
          </div>
          <div className="form-group">
            <label>加班结束时间:
            </label>
            <input required type="datetime-local" className="form-control"
              value={
                this.state.work_end_at
              }
              onChange={
                this.onChangeWorkEndAt
              }/>
          </div>
          <div className="form-group">
            <label>休息开始时间:
            </label>
            <input required type="datetime-local" className="form-control"
              value={
                this.state.rest_start_at
              }
              onChange={
                this.onChangeRestStartAt
              }/>
          </div>
          <div className="form-group">
            <label>休息结束时间:
            </label>
            <input required type="datetime-local" className="form-control"
              value={
                this.state.rest_end_at
              }
              onChange={
                this.onChangeRestEndAt
              }/>
          </div>

          <div className="form-group">
            <label>加班内容:
            </label>
            <input required type="text" className="form-control"
              value={
                this.state.content
              }
              onChange={
                this.onChangeContent
              }/>
          </div>


          <div className="form-group">
            <input type="submit" value="确认更新" className="btn btn-primary"/>
          </div>
        </form>
      </div>
    )
  }
}
